<template>
  <div style="padding: 40px">

    <div style="margin: 10px 0;">
      <el-button type="primary" style="margin-left: 10px;" @click="add">创建课程</el-button>
    </div>

    <el-table :data="tableData" border stripe style="width: 100%;" header-align="center" align="center">
      <el-table-column label="课程ID" width="70px"  header-align="center" align="center">
        <template slot-scope="scope">
          {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="courseName" label="课程名称" header-align="center" align="center"/>
      <el-table-column prop="teacherName" label="老师姓名" header-align="center" align="center"/>
      <el-table-column prop="clazzName" label="班级名称" header-align="center" align="center"/>
      <el-table-column prop="credit" label="学分" header-align="center" align="center"/>
      <el-table-column prop="location" label="上课地点"  header-align="center" align="center" />
      <el-table-column prop="startTime" label="开始时间(小节)"   header-align="center" align="center"/>
      <el-table-column prop="endTime" label="结束时间(小节)" header-align="center" align="center"/>
      <el-table-column prop="remarks" label="备注"   header-align="center" align="center"/>
      <el-table-column fixed="right" label="操作" width="180" header-align="center" align="center">
        <template #default="scope">
          <!-- 编辑按钮  -->
          <el-button type="primary" @click="handleEdit(scope.row)">更新</el-button>

<!--           删除按钮 -->
          <el-popconfirm title="这段内容确定删除吗?" @onConfirm="handleDelete(scope.row.id)">
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增弹窗 -->
    <el-dialog :visible.sync="dialogVisible" title="添加课程" width="30%">
      <el-form :model="form" label-width="120px">
        <el-form-item label="课程名称">
          <el-select v-model="form.courseName" style="width: 50%">
            <el-option
                v-for="subject in subjectName"
                :key="subject"
                :label="subject"
                :value="subject">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="老师姓名">
          <el-select v-model="form.teacherName" style="width: 50%">
            <el-option
                v-for="teacher in teacherOptions"
                :key="teacher.value"
                :label="teacher.label"
                :value="teacher.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级名称">
          <el-select v-model="form.clazzName" style="width: 50%">
            <el-option
                v-for="clazz in classOptions"
                :key="clazz.value"
                :label="clazz.label"
                :value="clazz.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学分">
          <el-input v-model="form.credit" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remarks" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="上课地点">
          <el-input v-model="form.location" style="width: 50%"></el-input>
        </el-form-item>

        <el-form-item label="开始时间(小节)">
          <el-input v-model="form.startTime" style="width: 50%"></el-input>
        </el-form-item>

        <el-form-item label="结束时间(小节)">
          <el-input v-model="form.endTime" style="width: 50%"></el-input>
        </el-form-item>



      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="save">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 点击编辑的弹窗 -->
    <el-dialog :visible.sync="dialogVisible1" title="更新课程" width="30%">

      <el-form :model="form" label-width="120px">
        <el-form-item label="课程ID">
          <el-input v-model="form.id" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="课程名称">
          <el-select v-model="form.courseName" style="width: 50%">
            <el-option
                v-for="subject in subjectName"
                :key="subject"
                :label="subject"
                :value="subject">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="老师姓名">
          <el-select v-model="form.teacherName" style="width: 50%">
            <el-option
                v-for="teacher in teacherOptions"
                :key="teacher.value"
                :label="teacher.label"
                :value="teacher.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级名称">
          <el-select v-model="form.clazzName" style="width: 50%">
            <el-option
                v-for="clazz in classOptions"
                :key="clazz.value"
                :label="clazz.label"
                :value="clazz.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学分">
          <el-input v-model="form.credit" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remarks" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="上课地点">
          <el-input v-model="form.location" style="width: 50%"></el-input>
        </el-form-item>

        <el-form-item label="开始时间">
          <el-input v-model="form.startTime" style="width: 50%"></el-input>
        </el-form-item>

        <el-form-item label="结束时间">
          <el-input v-model="form.endTime" style="width: 50%"></el-input>
        </el-form-item>



      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取消</el-button>
        <el-button type="primary" @click="saveEdit">确定</el-button>
      </span>
    </el-dialog>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total,prev, pager, next, jumper"
        :total="total">
    </el-pagination>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  getGuanALLStuC,
  getGuanCreateClassAll,
  getGuanUpDateDClass,
  getGuanXinStu,
  getThreeAll
} from '@/http/userList.js'
import {getGuanliStudentDelete} from "@/http/user";
import moment from "moment";

export default {
  name: "Notice",

  data() {
    return {
      form: {
        "courseName": "",
        "current": 0,
        "dayOfWeek": "",
        "pageSize": 0,
        "sortField": "",
        "sortOrder": "",
        "startTime": "",
        "endTime": "",
        "teacherName": "",

      },

      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      subjectName: [], // 用于存储学科列表
      teacherOptions: [
        {
          value:"",
          label:""}
      ], // 用于存储老师列表
      classOptions: [
        {
          value:"",
          label:""}
      ]
    }

  },
  created() {
    this.load()
    this.loadSubjects();
    this.loadTeachers(); // 添加这一行
    this.loadClasses();
  },

  methods: {
    formatMeetingTime(row) {
      return moment(row.startTime).format('YYYY-MM-DD HH:mm:ss'); // 根据需要调整格式
    },


    async load() {
      const { code, message, data } = await getGuanALLStuC({current: this.currentPage, size: this.pageSize})
      console.log(data)
      this.tableData = data.records
      this.total= Number(data.total)

    },
    add() {
      console.log("123");
      this.dialogVisible = true
      this.form = {
        "clazzName": "",
        "courseName": "",
        "credit": 0,
        "endTime": 0,
        "location": "",
        "remarks": "",
        "startTime": 0,
        "teacherName": ""
      }
    },
    // 确认添加
    async save() {
      const { code, message } = await getGuanXinStu(this.form)
      console.log(this.form)
      if (code == '0') {
        this.$message({
          type: "success",
          message: "添加成功"
        })
      } else {
        this.$message({
          type: "error",
          message: "添加失败"
        })
      }
      this.dialogVisible = false
      this.load()
    },
    async loadSubjects() {
      try {
        console.log("请求学科列表");
        const { code, data } = await getThreeAll();
        console.log("API 响应:", { code, data });
        if (code == '0') {
          // 确保 data 是一个对象，并且 records 是一个数组
          if (data && Array.isArray(data)) {
            this.subjectName = data.map(subject => subject.subjectName); // 假设每个学科对象有一个 name 属性
          } else {
            console.error("API 返回的数据结构不正确:", data);
            this.$message({
              type: "error",
              message: "获取学科列表出错，API 返回的数据结构不正确"
            });
          }
        } else {
          this.$message({
            type: "error",
            message: "获取学科列表失败"
          });
        }
      } catch (error) {
        console.error("获取学科列表出错:", error);
        this.$message({
          type: "error",
          message: "获取学科列表出错，请重试"
        });
      }},
    async loadTeachers(headmaster) {
      try {
        console.log("请求老师列表");
        const { code, data } = await getGuanCreateClassAll({headmaster:headmaster});
        console.log("API 响应:", { code, data });
        if (code == '0') {
          // 确保 data 是一个对象，并且 records 是一个数组
          if (data && Array.isArray(data.records)) {
            this.teacherOptions = data.records.map(teacher => ({
              value: teacher.headmaster, // 假设每个老师对象有一个 teacherName 属性
              label: teacher.headmaster
            }));
          } else {
            console.error("API 返回的数据结构不正确:", data);
            this.$message({
              type: "error",
              message: "获取老师列表出错，API 返回的数据结构不正确"
            });
          }
        } else {
          this.$message({
            type: "error",
            message: "获取老师列表失败"
          });
        }
      } catch (error) {
        console.error("获取老师列表出错:", error);
        this.$message({
          type: "error",
          message: "获取老师列表出错，请重试"
        });
      }
    },
    async loadClasses(name) {
      try {
        console.log("请求班级列表");
        const { code, data } = await getGuanCreateClassAll({name:name});
        console.log("API 响应:", { code, data });
        if (code == '0') {
          // 确保 data 是一个对象，并且 records 是一个数组
          if (data && Array.isArray(data.records)) {
            this.classOptions = data.records.map(clazz => ({
              value: clazz.name, // 使用 name 属性
              label: clazz.name
            }));
          } else {
            console.error("API 返回的数据结构不正确:", data);
            this.$message({
              type: "error",
              message: "获取班级列表出错，API 返回的数据结构不正确"
            });
          }
        } else {
          this.$message({
            type: "error",
            message: "获取班级列表失败"
          });
        }
      } catch (error) {
        console.error("获取班级列表出错:", error);
        this.$message({
          type: "error",
          message: "获取班级列表出错，请重试"
        });
      }
    },
    // 更新
    handleEdit(row) {
      console.log(row);
      this.form = { ...row }
      this.dialogVisible1 = true
    },
    // 确认更新
    async saveEdit() {

      const { code, message } = await getGuanUpDateDClass(this.form)
      if (code == '0') {
        this.$message({
          type: "success",
          message: "更新成功"
        })
      } else {
        this.$message({
          type: "error",
          message: "更新失败"
        })
      }
      this.dialogVisible1 = false
      this.load()
    },
    async handleDelete(id) {

      const { code, message } = await getGuanliStudentDelete({ id:id})
      if (code == '0') {
        this.$message({
          type: "success",
          message: "删除成功"
        })
      } else {
        this.$message({
          type: "error",
          message: message
        })
      }
      this.load()  // 删除之后重新加载表格的数据
    },
    handleSizeChange(pageSize ) {
      this.pageSize = pageSize;
      this.currentPage = 1;
      this.load()
    },
    async handleCurrentChange(pageNum) {
      this.currentPage = pageNum
      const { code, message, data } = await getGuanALLStuC({ current: pageNum, size: this.pageSize })
      console.log(data)
      this.tableData = data.records
      this.total= Number(data.total)
      this.load(); // 重新加载数据
    },
    onDaloag(row) {
      this.form1 = row
      this.dialogVisible2 = true
    }
  },
  computed: {
    ...mapGetters({
      userRole: 'user/getUserRole'
    })
  }

}
</script>

<style></style>
